<template>
    <div style="height: 100vh; display: flex; align-items: center; justify-content: center;">
        <div style="width: 50%;">
            <img style="width: 100%;" src="@/assets/imgs/404.jpg" alt="404 页面未找到">
            <div style="text-align: center; padding: 20px 0; font-size: 20px; color: #3741fb;">
                <a :href="linkUrl">返回主页</a>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, reactive, watchEffect } from 'vue';
import { useUserStore } from '@/store/user';

const userStore = useUserStore()
// 使用 ref 创建响应式变量（可以修改）
const linkUrl = ref('/');

const data = reactive({
    user: userStore.getUser()
});

// 使用 watchEffect 响应式地更新链接
watchEffect(() => {
    if (!data.user?.id) {
        linkUrl.value = "/login";
    } else {
        linkUrl.value = "/";
    }
});
</script>